<template>
	<view class="body" :style="{height: wh + 'px'}">
		<!-- 二维码区域 -->
		<view class="qr-box" v-if="JSON.stringify(visitor) !== '{}'">
			<view class="qr-title">
				<uni-icons type="scan"></uni-icons>
				<view class="qr-text">二维码</view>
			</view>
			<view class="qr-img-box">
				<image :src=qrCodeUrl  mode="heightFix"></image>
				<view class="">{{visitor.visitorName}}/个人票</view>
			</view>
			<view class="tip">
				<text>请你确认预约日期时段，如频繁操作预约取消，连续2天或累计5次预约取消未到馆将被列入黑名单，</text>
				<text class="tip-warn">3月内无法再预约到门票</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// user: {
				// 	username: '张三'
				// },
				visitor: {
					
				},
				//设备属性
				sysInfo: {},
				wh: 0,
				ww: 0,
				qrCodeUrl: ""
			};
		},
		onLoad(options) {
			// console.log("options: ", options)
			this.setSysInfo()
			this.setPersonInfo()
			this.getQRCode(options.orderId)
		},
		methods: {
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				this.sysInfo = sysInfo
				this.wh = sysInfo.windowHeight 		
			},
			setPersonInfo() {
				this.visitor = JSON.parse(uni.getStorageSync('personInfo') || '{}')
				// console.log(this.visitor)
			},
			async getQRCode(orderId) {
				// console.log("获取二维码了！")
				// const qrCodeInfo = {
				// 	...this.visitor,
				// 	orderId
				// }
				// const {data: res} = await uni.$http.post('/visitor/getQRCode', qrCodeInfo)
				// // console.log("data", res)
				// this.codeUrl = res.codeUrl
				// console.log("codeUrl: ", this.codeUrl)
				const {data: res} = await uni.$http.get('/orders/qrCodeUrl/' + orderId)
				// console.log("返回的订单二维码地址：", res)
				this.qrCodeUrl = res.qrCodeUrl
			}
		}
	}
</script>

<style lang="scss">
.body {
	//高度要适配
	// height: 650px;
	background-color: #f4f4f4;
	
	.qr-box {
		margin: 10px;
		background-color: white;
		.qr-title {
			display: flex;
			// justify-content: space-between;
			width: 80px;
			font-size: 15px;
			color: white;
			background-color: #bba344;
			border-radius: 0 50rpx 50rpx 0;
			margin: 10px;
			padding: 10px;
			.qr-text {
				margin-left: 5px;
			}
		}
		.qr-img-box {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.tip {
			// display: flex;
			padding: 10px;
			font-size: 15px;
			.tip-warn {
				color: red;
			}
		}
	}

	
}

</style>
